<%@page import="java.nio.file.attribute.UserDefinedFileAttributeView"%>
<html>
	<head>
		<meta name="layout" content="main"/>
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.css')}" type="text/css"/> 
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'image.css')}" type="text/css"/>
		<title>uTalk - Home</title>
	</head>
	<body>
		<!-- Onglet des différentes fonctionnalités -->
		<ul class="nav nav-pills">
			<li class="active"><a href="${createLink(controller:'user', action:'home')}">Home</a></li>
	  		<li ><a href="${createLink(controller:'user', action:'profile')}">Profile</a></li>
	  		<li><a href="${createLink(controller:'user', action:'message')}">Messages</a></li>
		</ul>
		
		<!-- Type de l'écran -->
		<h3><span class="label label-default">${flash.type}</span></h3>
		
		<!-- Partie talker -->
		<g:form controller="talk" action="newTalk" role="form">
			<div class="row">
			  <div class="col-lg-6">
			    <div class="input-group">
				    <span class="input-group-btn">
				        <button class="btn btn-default" type="submit" id="btnTalker" disabled=true>Talker</button>
				    </span>
				    <input onkeyup="reste(this.value);" type="text" name="newtalk" class="form-control">
			    </div>
			  </div>
			</div>
			
			<!-- Permet de calculer le nombre de caractères restants que l'utilisateur peut afficher -->
			<span id="caracteres">140</span> caractères restants
			<script type="text/javascript">
			
			function reste(texte)
			{
			    var restants=140-texte.length;
			    document.getElementById('caracteres').innerHTML=restants;
			    if(parseInt(restants) < 0 || parseInt(restants) == 140 )
			    	document.getElementById('btnTalker').disabled = true;
			    else
			    	document.getElementById('btnTalker').disabled = false;			
			}
			
			</script>
		</g:form>
		
		<br/><br/>
	
		<!--  Talk des personnes que l'on suit -->
		<table class="table table-striped">
			<tr>
				<td> Liste des HashTags </td>
				<td> Liste des Talks </td>
			</tr>
			
			<tr>	
				<td>
					<g:each var="ht" in="${flash?.tendanceHT?.listHT}">
						<g:link controller="hashTag" action="allTalkDetails" params="${[hashTag : ht]}">${ht}</g:link><br/>
					</g:each>
				</td>	
				
				<td>
					<g:each var="talk" in="${flash.message}">
					
					<g:if test="${talk?.userSender?.path == null}">
						<div class="media">
				    		<img class="media-object mini" src="${resource(dir: 'images', file: 'inconu.gif')}">
						</div>
					</g:if>
					<g:else>
						<div class="media">
							<g:if test="${talk?.userSender?.url == true}">
	    						<img class="media-objec thumb" src="${talk?.userSender?.path}">
	    					</g:if>
	    					<g:else>
	    						 <img class="media-objec thumb" src="${resource(dir: 'images', file: "${talk?.userSender?.path}")}">
	    					</g:else>
						</div>
					</g:else>
					
						<span class="label label-info"><g:link controller="user" action="profileDetails" params="${[userDetails : talk?.userSender?.pseudo]}">${talk?.userSender?.pseudo}</g:link></span>
						<g:formatDate format="yyyy-MM-dd" date="${talk?.dateWrite}"/>
						<br/>
						<div>${talk.message}</div>
						<br/>
						<br/>
					</g:each>
				</td>
			</tr>
		</table>
	</body>
</html>